import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    Alert,
    FlatList,
    TextInput,
    Linking,
    ScrollView
} from 'react-native';

import moment from 'moment';
import HttpUtils from '../../utils/HttpUtils';
import HttpUrls from '../../utils/HttpUrls';
import AndroidModule from "../../utils/AndroidConnent";
import { ToastToUser } from "../../utils/CustomToast";
import Constant from '../../utils/Constant'
import NoData from '../../utils/NoData'
import StatusBarSelf from '../../components/StatusBarSelf';
import { getImgUrl } from '../../utils/ComFunction'
import Loading from "../../utils/Loading";
import CommonAlertView from "../common/CommonAlertView";
import Header from "../../components/header";

let navigation

export default class CompanyDutyList extends Component {
    constructor(props) {
        super(props);
        let selectRoleId = this.props.route && this.props.route.params && this.props.route.params.selectRoleId ?this.props.route.params.selectRoleId : ''
        this.state = {
            dataArray: [],
            selectRoleId: selectRoleId,
        }
    }

    componentDidMount() {
        this.getDutyList()
    }

    getDutyList() {
        if (this.Loading) {
            this.Loading.show();
        }
        let param = {
            merchantId: Constant.userInfo.merchantId,
        }
        HttpUtils.postRequest(HttpUrls.getRoles, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                let data = result.data
                this.setState({
                    dataArray: data
                })
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} Title={'职务选择'} />

                <ScrollView style={{ backgroundColor: '#fff' }}>
                    {
                        this.state.dataArray && this.state.dataArray.map((item) => {
                            return (
                                <TouchableOpacity
                                    style={styles.itemBox}
                                    activeOpacity={0.8}
                                    onPress={() => {
                                        if (this.props.route.params && this.props.route.params.completion) {
                                            this.props.route.params.completion(item)
                                        }
                                    }}
                                >
                                    <Text style={[styles.roleText, { color: this.state.selectRoleId == item.roleId ? '#333' : '#999' }]}>{item.roleName}</Text>
                                </TouchableOpacity>
                            )
                        })
                    }
                </ScrollView>

                <Loading onRef={(ref) => (this.Loading = ref)} />
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    itemBox: {
        backgroundColor: '#fff',
        width: '100%',
        height: 45,
        marginLeft: 15,
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomWidth: 0.3,
        borderBottomColor: '#e4e4e4'
    },
    roleText: {
        color: '#333',

    }
})
